<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack5</title>
    <script>
        let docElement = document.documentElement;
        function setRemUnit(){
            //把根元素的字体大小设置为宽度的10分之一
            //屏幕宽是750像素的话，fontSize=75
            //iPhone6 宽是375 fontSize=37.5   10rem=375px
            docElement.style.fontSize = docElement.clientWidth/5+'px';
        }
        setRemUnit();
        window.addEventListener('resize',setRemUnit);
    </script>
</head>
<body>
   <div id="root"></div>
   <input placeholder="请输入用户名"/>
   <script src="https://polyfill.io/v3/polyfill.min.js"></script>
</body>
</html>